<div>
  <div class="content d-flex flex-column flex-column-fluid">

    <sub-header [title]="'GameSetup' | localize" [description]="activityId + '|' + activityName">
      <div role="actions">
      </div>
    </sub-header>


    <div [class]="containerClass">
      <div class="card card-custom gutter-b">
        <div class="card-body">
          <div class="row align-items-center">
            <tabset class="tab-container tabbable-line">
              <tab heading="{{l('GameSetup')}}" active="true" customClass="m-tabs__item icon-youxiguanli"
                (selectTab)="changeSetup('game')">
                <div class="m-subheader">
                  <div class="d-flex align-items-center">
                    <div class="text-right  col-12">
                      <!-- <button (click)="deleteGameList()" class="btn btn-primary blue">
              <i class="icon-piliangcaozuo"></i> {{l("deleteBatch")}}</button> -->
                      <button class="btn btn-primary" (click)="createGame()"
                        *ngIf="isGranted('Pages.Tenant.Activities.Create')">
                        <i class="fa fa-plus"></i>
                        {{l("createGame")}}</button>
                    </div>
                  </div>
                </div>
                <!-- <div class="kt-content"> -->
                <div class="Container row">
                  <div class="m-portlet__body">
                    <div class="row align-items-center">
                      <!--<Primeng-Datatable-Start>-->
                      <div class="primeng-datatable-container" [busyIf]="PrizePrimeng.isLoading">
                        <!-- resizableColumns="PrizePrimeng.resizableColumns" -->
                        <p-table #prizeDataTable (onLazyLoad)="getGame($event)" [value]="PrizePrimeng.records"
                          [rows]="PrizePrimeng.defaultRecordsCountPerPage" [(selection)]="gameList" [paginator]="false"
                          [lazy]="true" [resizableColumns]="PrizePrimeng.resizableColumns"
                          [responsive]="PrizePrimeng.isResponsive">
                          <ng-template pTemplate="header">
                            <tr>
                              <th
                                *ngIf="isGranted('Pages.Tenant.Activities.Delete')||isGranted('Pages.Tenant.Activities.Edit')">
                                {{l('Actions')}}</th>
                              <th style="width: 5.0em">
                                <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                              </th>
                              <th style="width:5%">{{l('RecordId')}}</th>
                              <th>{{l('name')}}</th>
                              <th>{{l('isSendWechatBeforeGame')}}</th>
                              <th>{{l('isSendWechatAfterGame')}}</th>
                              <th>{{l('isShareAction')}}</th>
                              <!-- <th>{{l('gameType')}}</th> -->
                              <!-- <th>{{l('supportedPlayersCount')}}</th> -->
                              <th style="width:25%">
                                <span>
                                  {{l('securityKey')}}
                                </span>
                              </th>
                            </tr>
                          </ng-template>
                          <ng-template pTemplate="body" let-record let-i="rowIndex">
                            <tr [pSelectableRow]="record" [attr.trid]="record.id">
                              <td
                                *ngIf="isGranted('Pages.Tenant.Activities.Delete')||isGranted('Pages.Tenant.Activities.Edit')">
                                <div class="btn-group dropdown" dropdown normalizePosition>
                                  <button class="dropdown-toggle btn btn-sm btn-primary" data-toggle="dropdown"
                                    dropdownToggle aria-haspopup="true" aria-expanded="false">
                                    <i class="fa fa-cog"></i>
                                    <span class="caret"></span> {{l("Actions")}}
                                  </button>
                                  <ul class="dropdown-menu" *dropdownMenu>
                                    <li *ngIf="isGranted('Pages.Tenant.Activities.Edit')">
                                      <a (click)="editGame(record)" class="icon-bianji dropdown-item">{{l('Edit')}}</a>
                                    </li>
                                    <li *ngIf="isGranted('Pages.Tenant.Activities.Delete')">
                                      <a (click)="deleteGame(record)" class="icon-icon-test dropdown-item">{{l('Delete')}}</a>
                                    </li>
                                  </ul>
                                </div>
                              </td>
                              <td style="width: 5.0em">
                                <p-tableCheckbox [value]="record"></p-tableCheckbox>
                              </td>
                              <td> {{transIndex(i,prizePaginator)}}</td>
                              <td>
                                <span>{{record.name}}</span>
                              </td>
                              <td>
                                <span>{{l(record.isSendSnsMsgBeforeGame)}}</span>
                              </td>
                              <td>{{l(record.isSendSnsMsgAfterGame)}}</td>
                              <td>{{l(record.isShareAction)}}</td>
                              <!-- <td>{{record.gameType}}</td> -->
                              <!-- <td>{{record.supportedPlayersCount}}</td> -->
                              <td>{{record.securityKey}}</td>
                            </tr>
                          </ng-template>
                          <ng-template pTemplate="emptymessage" let-records>
                            <tr *ngIf="PrizePrimeng.records">
                              <td colspan="7">
                                <img class="emptymessage" src="/assets/common/images/placeholder/couponHolder.png" />
                              </td>
                            </tr>
                          </ng-template>
                        </p-table>
                        <div class="primeng-paging-container">
                          <p-paginator [rows]="PrizePrimeng.defaultRecordsCountPerPage" #prizePaginator
                            (onPageChange)="getGame($event)" [totalRecords]="PrizePrimeng.totalRecordsCount"
                            [rowsPerPageOptions]="PrizePrimeng.predefinedRecordsCountPerPage">
                          </p-paginator>
                          <span class="total-records-count">
                            {{l('TotalRecordsCount', PrizePrimeng.totalRecordsCount)}}
                          </span>
                        </div>
                      </div>
                      <!--<Primeng-Datatable-End>-->
                    </div>
                  </div>
                </div>

              </tab>
            </tabset>
            <createOrEditGameModal #createOrEditGameModalComponent (modalSave)="getGame()"></createOrEditGameModal>
          </div>
        </div>
      </div>
    </div>

  </div>